<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
#menu {
    display: none;
    position: absolute;
    padding: 10px;
    background-color: #ddd;
    border: 1px solid #000;
}
#noidung{background:#CCCCCC;}
.giatri1, .giatri2{ background:#FF00FF; margin:10px;}
</style>
<script>
$(document).ready(function(){

$('.giatri1').bind("contextmenu",function(e){
alert($(this).attr('id'));
return false;
});
$("#noidung").bind("contextmenu", function(e) {

    $('#menu').css({
        top: e.pageY+'px',
        left: e.pageX+'px'
    }).show();

    return false;

});
 $('#menu').click(function() {
        $('#menu').hide();
    });
    $(document).click(function() {
        $('#menu').hide();
    });
});
</script>
</head>

<body>
<div id="menu">
<ul>
	<li>Add menu</li>
    <li>Delete</li>
</ul>
</div>
<div id="menu1">
</div>
<div id="noidung">
<div class="giatri1" id="giatriso1">
Gia tri 1
</div>
<div class="giatri1" id="giatriso3">
Gia tri 2
</div>

</div>
</body>
</html>
